import React, { Fragment, PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { ONE_PIXEL, STATUSBAR_HEIGHT } from '../../../../utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import TagView from 'src/components/tag-view/index'

export default class SearchHistory extends PureComponent {
  static propTypes = {
    historyArr: PropTypes.array,
    itemClick: PropTypes.func,
    deleteClick: PropTypes.func
  }

  static defaultProps = {
    historyArr: []
  }

  render() {
    const { historyArr, itemClick, deleteClick } = this.props
    return (
      <View style={styles.searchHistoryView}>
        {/* <View style={styles.headerView}>
          <Text style={styles.headerText}>大家都在搜</Text>
          <CustomButton style={styles.deleteView} onPress={deleteClick}>
            <CustomImage style={styles.deleteImg} source={require('src/imgC/home/delete_rubbish.png')} />
          </CustomButton>
        </View>
        <View style={styles.historyContentView}>
          {
            historyArr.map((item, index) => {
              return (
                <CustomButton key={index} style={styles.tagViewBtn} params={item} onPress={itemClick}>
                  <TagView style={styles.tagView} tagLabelStyle={styles.tagLabel} tagLabel={item.label} />
                </CustomButton>
              )
            })
          }
        </View> */}
        <View style={styles.headerView}>
          <Text style={styles.headerText}>搜索历史</Text>
          <CustomButton style={styles.deleteView} onPress={deleteClick}>
            <CustomImage style={styles.deleteImg} source={require('src/imgC/home/delete_rubbish.png')} />
          </CustomButton>
        </View>
        <View style={styles.historyContentView}>
          {
            historyArr.map((item, index) => {
              return (
                <CustomButton key={index} style={styles.tagViewBtn} params={item} onPress={itemClick}>
                  <TagView style={styles.tagView} tagLabelStyle={styles.tagLabel} tagLabel={item.label} />
                </CustomButton>
              )
            })
          }
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {},
  searchHistoryView: {
    marginTop: ScaleS(19),
    marginLeft: ScaleS(1.5),
    marginRight: ScaleS(1.5),
  },
  headerView: {
    alignItems: 'center',
    flexDirection: 'row',
    marginBottom: ScaleS(21),
  },
  headerText: {
    color: '#444444',
    fontSize: ScaleT(18),
    fontWeight: '500',
    flex: 1
  },
  deleteView: {
    // width: ScaleS(38),
    // height: ScaleS(38),
    // borderRadius: ScaleS(19),
    // borderStyle: 'solid',
    // borderColor: '#D7D7D7',
    // borderWidth: ONE_PIXEL,
    // alignItems: 'center',
    // justifyContent: 'center'
  },
  deleteImg: {
    width: ScaleS(12),
    height: ScaleS(14)
  },
  historyContentView: {
    // marginTop: ScaleS(10),
    flexDirection: 'row',
    flexWrap: 'wrap',

  },
  tagViewBtn: {
    marginBottom: ScaleS(31),
    marginRight: ScaleS(10),
  },
  tagView: {
    height: ScaleS(40),
    paddingHorizontal: ScaleS(19),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: ScaleS(18),
    // width: ScaleS(78),
    height: ScaleS(36),
    borderColor: '#E7E7E7',
    borderWidth: ScaleS(1),
    backgroundColor: 'white',
  },
  tagLabel: {
    color: '#3C3C3C',
    fontSize: ScaleT(12),
    fontWeight: '500',
    lineHeight: ScaleS(12)
  },
  flatListView: {
    flex: 1
  }
})